<template>
	<div class="header">
		<div class="header-top">
			<div class="header-left">
				<img src="@/assets/img/logo.png"/>
				<div>{{schoolName}}<span>3D模型空间</span></div>
			</div>
			
			<div class="header-right">
				<template v-if='token'>
					<span class="publish" @click="publish">发布</span>
					<span @click="loginOut">退出</span>
				</template>
				<span @click="login" v-else>登录</span>
			</div>
		</div>
		<img class="header-img" src="@/assets/img/header_bg.png"/>
		
	</div>
</template>
<script>
	import utils from '@/assets/js/utils';
	import {
		mapState,
		mapActions
	} from 'vuex';
	import {
		loginOut
	} from '@/api/common.js';
	export default {
		data() {
			return {
				token:"",
				schoolName:""
			};
		},

		computed: {
			...mapState(['userInfo', 'communalInfo'])
		},

		created() {
			this.token = utils.getSession('token');
			this.schoolName = this.token && utils.getSession('schoolName') ? utils.getSession('schoolName') : '';
		},

		methods: {
			publish(){
				this.$router.push({
					path: "/create-model"
				})
			},
			
			login(){
				this.$router.push({
					path: "/login"
				})
			},
			
			async loginOut(){
				const {
					data,
					status
				} = await loginOut({});
				if(data.code == 200){
					this.$message.success('退出成功');
				}
				utils.removeSession('token');
				utils.removeSession('userType');
				utils.removeSession('schoolName');
				utils.removeSession('realname');
				utils.removeSession('headimg');
				utils.removeSession('createTime');
				this.$router.push('/login');	
			}
		}
	};
</script>
<style lang="scss" scoped>
	.header {
		width: 100%;
		margin-bottom: 15px;
		.header-top{
			@include flex-row;
			justify-content: space-between;
			.header-left {
				@include flex-row;
				img{
					width: 223px;
					height: 47px;
				}
				div{
					margin-left: 30px;
					font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
					font-weight: bold;
					font-size: 30px;
					color: #333333;
					span{
						color: #FF8A00
					}
				}
			}
			
			.header-right {
				@include flex-row;
				@include cursor-style;
				span{
					width: 100px;
					height: 36px;
					font-size: 14px;
					line-height: 36px;
					text-align: center;
					background: #FFFFFF;
					border-radius: 5px 5px 5px 5px;
					border: 1px solid #FF8A00;
					color: #FF8A00;
				}
				.publish{
					margin-right: 10px;
					background: #FF8A00;
					border-radius: 5px 5px 5px 5px;
					color: #FFFFFF;
					border: none;
				}
			}
		}
		
		
		.header-img {
			display: block;
			margin-top: 25px;
			width: 100%;
			height: 100px;
		}
	}
</style>